
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
  </head>
  <body>
   <table id="table"></table>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    
    <script type="text/javascript">
    	// https://www.cnblogs.com/laowangc/p/8875526.html 实际例子
		
    	var $table;
        //初始化bootstrap-table的内容
        function InitMainTable () {
            //记录页面bootstrap-table全局变量$table，方便应用
            var queryUrl = '/list?rnd=' + Math.random()
            $table = $('#table').bootstrapTable({
                url: queryUrl,                      //请求后台的URL（*）
                method: 'GET',                      //请求方式（*）
                //toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 5,                        //每页的记录行数（*）
                pageList: [5, 10, 25, 50, 100],     //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索
                strictSearch: true,
                //showColumns: true,                  //是否显示所有的列（选择显示的列）
                //showFullscreen: true,                
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "traceid",                //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: true,                  //是否显示父子表
                detailFormatter:function(index, row){
                	//return "<pre>" + row.loginfo + "</pre>"; 
                	return "<pre>" + row.loginfo + "</pre> <br>" + "<a target=\"_blank\" href=\"./cat/cat.html?waterfall=false&traceId="+ row.traceid  +"\">查看详情</a> </strong>";
                },
                //得到查询的参数
                queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                    var temp = {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true,
                    visible: false                  //是否显示复选框
                }, {
                    field: 'traceid',
                    title: 'ID',
                    width: 220,
                    align: 'center',
                    valign: 'middle',                    
                    //sortable: true
                    formatter: function(value, item, index) {
                    	return "<a target=\"_blank\" href=\"./cat/cat.html?waterfall=false&traceId="+ value  +"\">"+ value +"</a> </strong>"
                    },
                }, {
                    field: 'typee',
                    title: '类型',
                    //sortable: true
                }, {
                    field: 'elapse',
                    title: '耗时',
                    sortable: true ,
                    //formatter: emailFormatter
                }, {
                    field: 'url',
                    title: 'URL',
                    //formatter: linkFormatter
                }, {
                    field: 'param',
                    title: '入参',
                    formatter:function (value, row, index,field) {
                        return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title="+value+">"+value+"</span>"
                    },
                    cellStyle:function (value, row, index,field) {
                        return {
                            css:{
                                "min-width":"50px",
                                "white-space":"nowrap",
                                "test-overflow":"ellipsis",
                                "overflow":"hidden",
                                "max-width":"200px",
                            }
                        }
                    }
                }, {
                    field: 'result',
                    title: '出参',
                    formatter:function (value, row, index,field) {
                        return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title="+value+">"+value+"</span>"
                    },
                    cellStyle:function (value, row, index,field) {
                        return {
                            css:{
                                "min-width":"50px",
                                "white-space":"nowrap",
                                "test-overflow":"ellipsis",
                                "overflow":"hidden",
                                "max-width":"200px",
                            }
                        }
                    }
                }, {
                    field: 'D',
                    title: '链路流程图',
                    formatter: function(value, item, index) {
                    	return  "<a target=\"_blank\" href=\"./dagre-d3-cat.html?traceId="+ item.traceid  +"\">查看链路流程图</a> </strong>";
                    }
                }, ],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                    var id = row.ID;
                    EditViewById(id, 'view');
                },
            });
        };   
        
        InitMainTable();
    
    </script>
  </body>
</html>